<template>
  <div class="flex width1200 margin-center mgt-20">
    <div class="navMenu">
      <el-menu :default-active="activeIndex" :router="true" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/help/problem">常见问题</el-menu-item>
        <el-menu-item index="/help/feedback">意见反馈</el-menu-item>
        <el-menu-item index="/help/serviceCenter">客服中心</el-menu-item>
        <el-menu-item index="/help/aboutUs">关于我们</el-menu-item>
      </el-menu>
    </div>
    <div class="box flex1">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/index",
      headImg: require("../../assets/img/图层 678@2x.png"),
      list: {
        img: require("../../assets/img/图层 10 拷贝@2x.png"),
        name: "李焦",
        sex: "女",
        organisation: "成都市泡桐树小学",
        tag: "基础班,—年级上册,第一单元",
        date: "2021-03-10",
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
// @import "../assets/css/variable.less";
.navMenu {
  margin-right: 20px;
  width: 224px;
  background: #ffffff;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
}
.box {
  box-sizing: border-box;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 7px 7px 7px 7px;
}
/deep/.el-menu.el-menu--horizontal {
  border: 0;
  margin-top: 20px;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 1px;
}
/deep/ .el-menu--horizontal > .el-menu-item {
  float: none;
  height: 50px;
  line-height: 50px;
  border: none;
}
/deep/ .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0;
  font-weight: bold;
  font-size: 16px;
}
</style>